import React,{Component} from 'react';
import {Breadcrumb,Input,Button,notification} from 'antd';
import service from '../lib/service';

class BranchBound extends Component{
    state={
        k:0,
        array:'',
        result:0
    }


    handleCalculation(){
        let params = {
            k:this.state.k,
            array:this.state.array
        }
        service.getBranchBound(params).then((res)=>{
            notification.success({
                key: '计算成功',
                message: '结果已计算完毕',
                description: '请查看..'
            });
            this.setState({result:res.data});
        }).catch((res)=>{
            console.log(res);
            // notification.error({
            //     key: 'error',
            //     message: '计算错误',
            //     description: res
            // });
        })
    }

    setK=(e)=>{
        let k  = parseInt(e.target.value,0);
        this.setState({k:k});
    }

    setArray=(e)=>{
        this.setState({array:e.target.value});
    }

  
    render(){
        return(
            <div style={{ background: '#fff', padding: 24, minHeight: 663 ,border:"1px solid #ececec"}}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>分支限界</Breadcrumb.Item>
                  <Breadcrumb.Item>机器调度</Breadcrumb.Item>
              </Breadcrumb>
              <div className="main">
                <div className="problem-describe">
                    <h1>问题描述</h1>
                    <p className="problem-describe-text">假设有n个任务由k个可并行工作的机器完成。完成任务i需要的时间为ti。试设计一个算法找出完成这n个任务的最佳调度，使得完成全部任务的时间最早。 </p>                   
                </div>
                <div className="problem-reflection">
                    <h1>算法分析</h1>
                    <p className="problem-describe-text">机器调度问题存在空间状态树，每一层的节点树为机器数，树的深度与任务数一致，通过深度优先遍历得到下界，根据已知下界进行剪枝，若当前结果小于下界则修改下界值，遍历完成后，下界即是最优解</p>
                </div>
                <div className="problem-solution">
                    <h1>解决方案</h1>
                    <p className="problem-describe-text">输入测试值</p>
                    <div className="calculation">
                        机器数量: <Input onChange={(e)=>this.setK(e)} size="small" placeholder="输入机器数量" />
                        任务调度时间: <Input onChange={(e)=>this.setArray(e)} size="small" placeholder="输入调度时间，用，隔开" />
                        <Button style={{marginLeft:'20px'}} onClick={this.handleCalculation.bind(this)}>计算结果</Button>
                    </div> 
                    <div className="result">
                        <div>最佳调度时间为:{this.state.result}</div>
                    </div>
                </div>
              </div>
            </div>
        )
    }
}


export default BranchBound;